import React, { Component } from "react";
import { Select, Input, DatePicker, Button, Tabs, Pagination } from "antd";
import moment, { isMoment } from "moment";
import "moment/locale/zh-cn";
import Img from "../../assets/images/logo.png";
import "./index.less";

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
moment.locale("zh-cn");

function handleChange(value) {
  console.log(`selected ${value}`);
}

function onChange(dates, dateStrings) {
  console.log("From: ", dates[0], ", to: ", dates[1]);
  console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
}
function callback(key) {
  console.log(key);
}
export default class OrderQuery extends Component {
  render() {
    return (
      <div className="order-queryw basic-page">
        {/* 信息筛选 */}
        <div className="query-search">
          {/* 评价时间 */}
          <div className="order-time">
            <span className="title">评价时间：</span>
            <RangePicker
              ranges={{
                昨天: [moment(), moment()],
                今天: [moment().startOf("date"), moment()],
                近7天: [moment().startOf("week"), moment().endOf("week")],
                近30天: [moment().startOf("month"), moment().endOf("month")]
              }}
              //   defaultPickerValue=[moment()]
              showTime
              format="YYYY/MM/DD HH:mm:ss"
              onChange={onChange}
            />
          </div>
          {/* 商品名称： */}
          <div className="goods">
            <div>
              <span className="title">订单搜索：</span>
              <Input className="goods-input" />
            </div>
            <div className="goods-content">
              <span className="title">商品名称：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className="goods-content">
              <span className="title">评价星级：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
          </div>
          {/* 订单状态 */}
          <div className="order-status">
            <div>
              <span className="title">评价方式：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
          </div>
          {/* 清空筛选条件 */}
          <div className="filter">
            <Button type="primary" className="select">
              筛选
            </Button>
            <Button className="export-report">导出报表</Button>
            清空筛选条件
          </div>
        </div>
        {/* 列表标题 */}
        <div className="headlines-name">
          <div>评价内容</div>
          <div>星级评价</div>
          <div>服务评价</div>
          <div>评价时间</div>
          <div>买家</div>
          <div>操作</div>
        </div>

        <div className="goods-list">
          {/* 订单信息 */}
          <div className="list-top">
            <div className="order-info">
              <div>商品信息：</div>
              <div>手工舒适木椅</div>
              <div className="more">
                更多
                {/* 更多弹窗 */}
              </div>
              <div>下单时间：SSSSS</div>
              <div className="method-payment">微信商城 / 微信支付</div>
            </div>
            <div className="remark">
              查看详情 <b>-</b>
              <span>备注</span>
            </div>
          </div>
          {/* 列表部分 */}
          <table>
            <tbody>
              <tr>
                <td>
                  <div className="flex-td first-td">
                    <img src={Img} alt="" />
                    <div className="space-letter area">
                      <div className="flex-h">
                        <div>高级木椅</div>
                        <div>¥123.00</div>
                      </div>
                      <div className="flex-h">
                        <div>源自大师手艺，注入心血</div>
                        <div>1件</div>
                      </div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="space-letter">买家发起维权</div>
                </td>
                <td>
                  <div className="space-letter">QQQQ</div>
                </td>
                <td>
                  <div className="space-letter">快递</div>
                </td>
                <td>
                  <div className="space-letter">¥123</div>
                </td>
                <td>
                  <div className="space-letter">等待卖家发货</div>
                </td>
                <td>
                  <div className="space-letter send">发送</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 列表分页 */}
        <div style={{ margin: 20 }}>
          <Pagination defaultCurrent={6} total={500} />
        </div>
      </div>
    );
  }
}
